vue3
<!-- author: xuett -->
<!-- date: 2025-07-07 16:06:18 -->
<!-- description:  -->
<template>
  <div class="chart-box">
    <v-chart ref="chart2" :option="chartOption" autoresize />
  </div>
</template>

<script setup>
import * as echarts from "echarts";

const getImgUrl = (fileName) => {
  return new URL(`../../../../assets/images/echarts/${fileName}.png`, import.meta.url).href;
};

const state = reactive({
  card3Data: [
    {
      name: "商务局",
      value: 3954
    },
    {
      name: "卫生健康局",
      value: 2360
    },
    {
      name: "环卫局",
      value: 1025
    },
    {
      name: "国土局",
      value: 998
    },
    {
      name: "自然资源局",
      value: 874
    }
  ],
  chartOption: {}
});
const { chartOption } = toRefs(state);

onMounted(() => {
  initChart();
});

//完成情况
const chart2 = ref();
const initChart = () => {
  let colorList = [
    ["rgba(78, 97, 248,1)", "rgba(106, 167, 250,1)"],
    ["rgba(68, 62, 175, 1)", "rgba(100, 88, 196, 1)"],
    ["rgba(198, 142, 81, 1)", "rgba(217, 179, 120, 1)"],
    ["rgba(100, 80, 80, 0.38)", "rgba(255, 255, 255, 0.38)"]
  ];
  let max = state.card3Data[0].value;
  state.card3Data.forEach((item) => {
    if (item.value > max) {
      max = item.value;
    }
  });
  let maxList = new Array(state.card3Data.length).fill(max);
  state.chartOption = {
    tooltip: {
      backgroundColor: "#255DA9",
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    grid: {
      left: "2%",
      right: "0%",
      bottom: "0%",
      top: "10%",
      containLabel: true
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        data: state.card3Data,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      {
        type: "category",
        inverse: true,
        data: state.card3Data,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "近一月部门协同事件",
        type: "bar",
        yAxisIndex: 0,
        z: 2,
        barWidth: 6,
        itemStyle: {
          borderRadius: 3
        },
        label: {
          show: true,
          position: ["0", "-35"],
          formatter: (data) => {
            let str = "";
            if (data.dataIndex < 3) {
              str = "{specialNo|TOP." + (data.dataIndex + 1) + "}" + "{name|" + data.name + "}";
            } else {
              str = "{normalNo|TOP." + (data.dataIndex + 1) + "}" + "{name|" + data.name + "}";
            }
            return str;
          },
          rich: {
            specialNo: {
              borderWidth: 1,
              borderColor: "#5291F0",
              backgroundColor: "rgba(82, 145, 240, 0.3)",
              width: 52,
              height: 25,
              fontSize: 15,
              color: "#D1E4FF",
              lineHeight: 25,
              align: "center",
              padding: [2, 0, 0, 0]
            },
            normalNo: {
              backgroundColor: "rgba(118, 154, 220, 0.3)",
              width: 52,
              height: 25,
              fontSize: 15,
              color: "#fff",
              lineHeight: 25,
              align: "center",
              padding: [2, 0, 0, 0]
            },
            name: {
              color: "#fff",
              fontSize: 16,
              lineHeight: 25,
              padding: [2, 0, 0, 10]
            }
          }
        },
        data: state.card3Data.map((item, index) => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: index > 2 ? colorList[3][0] : colorList[index][0] //背景起始颜色
                  },
                  {
                    offset: 1,
                    color: index > 2 ? colorList[3][1] : colorList[index][1] //背景结束颜色
                  }
                ],
                false
              )
            }
          };
        })
      },
      {
        name: "背景",
        type: "bar",
        tooltip: {
          show: false
        },
        yAxisIndex: 1,
        z: 1,
        barWidth: 6,
        barGap: "-100%",
        data: maxList,
        itemStyle: {
          color: "rgba(24,31,68,1)",
          borderRadius: 3
        },
        label: {
          show: true,
          position: ["100%", "-27"],
          align: "right",
          padding: [0, 0, 0, -80],
          formatter: (data) => {
            return "{a|" + state.card3Data[data.dataIndex].value + "}";
          },
          rich: {
            a: {
              color: "#C3D7F8",
              fontSize: 18
            }
          }
        }
      },
      {
        // 小圆圈
        name: "",
        type: "pictorialBar",
        yAxisIndex: 0,
        symbol: "circle",
        axisLabel: {
          show: false
        },
        symbolSize: 8,
        symbolOffset: [0, 0],
        symbolPosition: "end",
        zlevel: 3,
        tooltip: {
          show: false
        },
        itemStyle: {
          color: "#fff"
        },
        data: state.card3Data.map((item) => {
          return {
            name: item.name,
            value: item.value
          };
        })
      }
    ]
  };
};
</script>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #000;
}
</style>
